<template>
	<view>
		<van-notify id="van-notify" />
		<van-cell-group>
			<van-field label="姓名" required data-type="name" input-align="right" @change="onChange" placeholder="请输入姓名" />
			<van-field label="手机号" required type="number" input-align="right" data-type="phone" @change="onChange" placeholder="请输入手机号"
			 :border="false" />
		</van-cell-group>
		
		<view class="oper">
			<button type="primary" :plain="true"  @click="submit" size="mini">下一步</button>
		</view>
		
	</view>
</template>

<script>
	import Notify from '@/wxcomponents/notify/notify';
	export default {
		data() {
			return {
				phone: '',
				name: ''
			};
		},
		methods: {
			onChange(e) {
				if(e.target.dataset.type === 'phone'){
					this.phone = e.detail
				}else if (e.target.dataset.type === 'name'){
					this.name = e.detail
				}
				
			},
			submit(){
				if(!this.name){
					Notify('姓名不能为空')
					return
				}
				if(!this.phone){
					Notify('手机号不能为空')
					return
				}
				
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					Notify('不是有效的手机号码，请检查')
					return
				}
			}
		}
	}
</script>

<style lang="scss">
.oper{
	display: flex;
	justify-items: center;
	margin-top: 200rpx;
	button{
		padding: 6rpx 130rpx;
	}
}
</style>
